import React, {useEffect, useState} from 'react';
import {Col, Row} from "reactstrap";

import {Location, Time, ProjectIcon} from "./icons";
import {Edit3, Save} from "react-feather";
import SelectProject from "../../../../components/general/SelectProject";
import Select from "react-select";
import {SET_EVENT_INFO_FIELD, SET_EVENT_INFO_VALUE} from "../../../../redux/constants/eventDetail/tabInfo";
import {EventsService} from "../../../../services/events/events.service";
import {PrivateProjectProvider} from "../../../../providers/PrivateProjectProvider";

const EventHeaderItem = props => {
  return (
    <Row className="event-title14">
      <Col className="col-md-auto align-self-center col-2 pr-0">
        <div className="event-header-icon">
          <props.icon/>
        </div>
      </Col>
      <Col className="col-md-auto align-self-center col-10">
        {props.data ? props.data : ''}
      </Col>
    </Row>
  )
};

const EventEditName = props => {
  const [editDivAtt, setEditDivAtt] = useState(false)

  useEffect(() => {
    props.getProjectList({'owners': props.verifyId, fields: 'projects.id, projects.name', includes: 'owner'})
  }, []);

  const handleChange = (e) => {
    props.setFieldData(SET_EVENT_INFO_FIELD, 'project', e)
  }
  const saveProject = () => {
    EventsService.update({project_id: props.data.id}, props.eventId).then(() => {
      setEditDivAtt(false)
    }).catch(() => {
      setEditDivAtt(true)
    })
  }

  return (
    <Row className="event-title14">
      <Col className="col-md-auto align-self-center col-2 pr-0">
        <div className="event-header-icon">
          <props.icon/>
        </div>
      </Col>
      <Col className="col-md-auto align-self-center col-10">
        {
          !editDivAtt ?

            <div className="event-edit-field-group">
              <div className='event-edit-field'>
                {props.data.name && props.data.name.length > 50 ? `${props.data.name.slice(0, 47)}...` : props.data.name}
              </div>
              <PrivateProjectProvider owner={props.owner} verifyId={props.verifyId}>
                <Edit3 color="#EBEEFC" width="16px" className="event-edit-icon"
                       onClick={() => setEditDivAtt(!editDivAtt)}/>
              </PrivateProjectProvider>

            </div> :
            <>
              <PrivateProjectProvider owner={props.verifyId} verifyId={props.owner}>
                <div className="event-edit-field-project">
                  <Select
                    className={`input-dark-bg w-100`}
                    maxMenuHeight={250}
                    classNamePrefix="dark_select"
                    value={{
                      ...props.data,
                      value: props.data.id,
                      label: props.data.name
                    }}
                    options={props.projectList.map(el => {
                      return {
                        ...el,
                        value: el.id,
                        label: el.name
                      }
                    })}
                    onChange={handleChange}
                    name="color"
                  />
                  <Save color="#EBEEFC" width="16px" className="event-edit-icon"
                        onClick={saveProject}/>
                </div>
              </PrivateProjectProvider>
            </>
        }
      </Col>
    </Row>
  )
}

const EventHeader = props => {

  return (
    <Row className="event-header">
      <Col sm={12} className="col-md-auto align-self-center mb-1 pr-2">
        <div className="event-header-name  event-header-item">
          {props.name}
        </div>
      </Col>
      <Col sm={12} className="col-md-auto  mb-1 pr-2">
        <div className=" event-header-item">
          <EventHeaderItem icon={Location} data={props.placeStr}/>
        </div>
      </Col>
      <Col sm={12} className="col-md-auto  mb-1 pr-2">
        <div className=" event-header-item">
          <EventHeaderItem icon={Time} data={props.timeStr}/>
        </div>
      </Col>
      <Col sm={12} className="col-md-auto  mb-1 pr-2">
        <div className="event-header-item">
          <EventEditName
            icon={ProjectIcon}
            data={props.project}
            getProjectList={props.getProjectList}
            verifyId={props.verifyId}
            owner={props.owner}
            projectList={props.projectList}
            setFieldData={props.setFieldData}
            eventId={props.eventId}
          />
        </div>
      </Col>
    </Row>
  )
};

export default EventHeader;
